<template>
  <div class="continer">
    <ZfwSearchForm :fileds="fileds" @onSearch="onSearch">
      <template #operate>
        <el-button size="small" plain type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        <el-button size="small" plain type="danger" icon="el-icon-delete" @click="delMuple">删除</el-button>
        <el-button size="small" plain type="success" icon="el-icon-upload2" @click="handleUpload">导出</el-button>
      </template>
    </ZfwSearchForm>
    <el-row>
      <el-col :span="5">
        <div class="tree">
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <zfw-table row-key="id" :isFirst="false" :column="column" :onSearch="handleSearch" @selectChange="selectChange"
          :params="params" ref="tableRef">
          <template #userType="{ row }">
            <el-tag v-if="row.userType == 1" type="warning">已注册</el-tag>
            <el-tag v-else>未注册</el-tag>
          </template>
          <template #status="{ row }">
            <el-tag v-if="row.status == 1" type="warning">有效</el-tag>
            <el-tag v-else-if="row.status == 8">冻结</el-tag>
            <el-tag v-else-if="row.status == 9" type="danger">删除</el-tag>
            <el-tag v-else>无效</el-tag>
          </template>
          <template #operate="{ row }">
            <el-button type="danger" size="small" @click="del(row)">删除</el-button>
            <el-button type="primary" size="small" @click="opearte(row, 'edit')">修改</el-button>
            <el-button type="primary" size="small" @click="opearte(row, 'detail')">查看</el-button>
          </template>
        </zfw-table>
      </el-col>
    </el-row>
    <div v-if="isVisible">
      <AddPage :type="type" :personId="personId" :visible="visible" @close="handleClose" @confrim="handleConfrim" />
    </div>
  </div>
</template>
<script>
import Mixin from "./config/mixin";
import AddPage from './components/AddPage'
import { getContactsList, limitDel } from "@/api/personmanagement.js"
import { treeselect } from "@/api/system/dept.js"
export default {
  name: "institutionPerson",
  mixins: [Mixin],
  components: { AddPage },
  data() {
    return {
      treeData: [],
      defaultProps: {
        label: "label",
        children: 'children',
      },
      isVisible: false,
      visible: false,
      params: {
        orgId: ""
      },
      type: "add",
      personId: "",
      selectKey: []
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    // 导出
    handleUpload() {
      const params = JSON.parse(JSON.stringify(this.params))
      this.download(
        "/cim/contacts/limit/export",
        {
          ...params,
        },
        `机构人员管理_${new Date().getTime()}.xlsx`
      );
    },
    // 编辑详情
    opearte(row, type) {
      this.type = type
      this.personId = row.id
      this.isVisible = true
      this.visible = true
    },
    // 新增成功
    handleConfrim() {
      this.visible = false
      this.$nextTick(() => {
        this.isVisible = false
      })
      this.$refs.tableRef.refreshTable()
    },
    // 关闭
    handleClose() {
      this.visible = false
      this.$nextTick(() => {
        this.isVisible = false
      })
    },
    // 获取左侧树数据
    async getTree() {
      const { code, data } = await treeselect()
      if (code === 200) {
        this.treeData = data
      }
    },
    handleNodeClick(values) {
      if (values.id === this.treeData[0].id) {
        this.params.orgId = ""
      } else {
        this.params.orgId = values.id
      }
    },
    add() {
      this.type = "add"
      this.personId = ""
      this.isVisible = true
      this.visible = true
    },
    onSearch(params) {
      this.params = {
        ...this.params,
        ...params
      }
    },
    // 批量删除
    delMuple() {
      if (this.selectKey.length === 0) {
        this.$message.error("请选择要删除的数据")
        return
      }
      this.$confirm('确定要删除数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectKey.join(",")
        this.delApi(ids)
      }).catch(() => {

      });
    },
    // 删除
    async delApi(personIds) {
      const res = await limitDel({ personIds })
      if (res.code === 200) {
        this.$message.success("删除成功")
        this.$refs.tableRef.getTable()
      }
    },
    del(row) {
      this.$confirm('确定要删除数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delApi(row.id)
      }).catch(() => {

      });
    },
    // 列表数据查询
    async handleSearch(values) {
      console.log("values", values)
      const tParams = {
        ...values,
        pageNumber: values.pageNum
      }
      delete tParams.pageNum
      const { code, data } = await getContactsList(tParams)
      if (code === 200) {
        return {
          total: data.total,
          list: data.records
        }
      }
    },
    selectChange(values) {
      this.selectKey = values.map(item => item.id)
    }
  }

}
</script>
<style lang="scss" scoped>
.tree {
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  height: calc(100vh - 240px);
  overflow-y: auto;
}
</style>
